<script lang="ts" setup>
import { onMounted, ref, reactive } from 'vue'
import type { DeptModel, ResultModel, DeptModelArray  } from '@/api/model/model'
import { queryAllApi, addApi, queryInfoApi, updateApi, deleteApi } from '@/api/dept'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'


//列表数据
let tableData = ref<DeptModelArray>([])
let dialogFormVisible = ref<boolean>(false) //控制新增与修改的对话框的显示与隐藏
let formTitle = ref<string>('') //控制新增与修改的对话框的标题
let dept = ref<DeptModel>({ name: '' }) //表单数据绑定对象

//钩子函数
onMounted(()=> {
  queryAll()
})

//动态加载数据
const queryAll = async () => {
  const result = await queryAllApi()
  tableData.value = result.data
}

//新增方法
const add = () => {
  dialogFormVisible.value = true
  formTitle.value = '新增部门'
  dept.value = { name: '' }
}

//表单校验规则
const rules = reactive<FormRules<DeptModel>>({
  name: [
    { required: true, message: '请输入部门名称', trigger: 'blur' },
    { min: 2, max: 10, message: '部门名称的长度在2-10之间', trigger: 'blur' }
  ]
})

//重置表单校验信息
const resetForm = (form: FormInstance | undefined) => {
  if (!form) return
  form.resetFields()
}

//保存方法
const deptForm = ref<FormInstance>()
const save = async (form: FormInstance | undefined) => {
  //表单校验
  if(!form) return
  form.validate(async (valid) => {
    if(valid) {
      //保存部门数据, 根据ID判断, 如果存在ID执行更新, 不存在ID执行新增
      let result: ResultModel
      if(dept.value.id){
        result = await updateApi(dept.value)
      }else {
        result = await addApi(dept.value)
      }

      if (result.code) {
        ElMessage.success('操作成功')
      } else {
        ElMessage.error(result.msg)
      }
      dialogFormVisible.value = false
      queryAll()
    }
  })  
}


//修改方法-查询回显
const update =async (id:number) => {
  dialogFormVisible.value = true
  formTitle.value = '修改部门'
  dept.value = { name: '' }

  //根据ID查询回显数据
  const result: ResultModel = await queryInfoApi(id)
  dept.value = result.data
}

//删除方法
const del = (id:number) => {
  ElMessageBox.confirm('您确认删除此数据吗?', '删除部门', {confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning'})
    .then( async () => {
      let result = await deleteApi(id)
      if(result.code) {
        ElMessage.success('删除成功')
        queryAll()
      }else {
        ElMessage.error(result.msg)
      }
    }).catch(() => {
      ElMessage.info('取消删除')
    })
}

</script>

<template>
    <!-- 顶部标题 -->
    <div>
      <div id="title">部门管理</div>
      <el-button type="primary" style="float: right;" @click="add();resetForm(deptForm)">新增</el-button>
      <br><br>
    </div>

    <!-- 表格数据展示 -->
    <el-table :data="tableData" border style="width: 100%" fit>
      <el-table-column type="index" label="序号" width="150px" align="center" />
      <el-table-column prop="name" label="部门名称" align="center" />
      <el-table-column prop="updateTime" label="最后修改时间" align="center" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" size="small" @click="update(scope.row.id);resetForm(deptForm)">修改</el-button>
          <el-button type="danger" size="small" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


    <!-- 添加、修改Dialog -->
    <el-dialog v-model="dialogFormVisible" :title="formTitle" align-center width="30%">
      <el-form :model="dept" :rules="rules" ref="deptForm">
        <el-form-item label="部门名称" label-width="80px" prop="name">
          <el-input v-model="dept.name" autocomplete="off" />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false; resetForm(deptForm)">取消</el-button>
          <el-button type="primary" @click="save(deptForm)">保存</el-button>
        </span>
      </template>
    </el-dialog>

</template>

<style scoped>
#title {
  font-size: 20px;
  font-weight: 600;
}
</style>